<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区 -->
    <el-card>
      <!-- 添加分类 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddCateDialog"
            >添加分类</el-button
          >
        </el-col>
        <!-- 添加分类对话框 -->
        <el-dialog
          title="添加分类"
          :visible.sync="setAddDialogVisible"
          width="50%"
          @close="closedAddCateDialog"
        >
          <el-form
            :model="addCateForm"
            :rules="addRuleForm"
            ref="addFormRef"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="分类名称" prop="cat_name">
              <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>

            <el-form-item label="父级分类">
              <!-- options 用来指定数据源 -->
              <!-- props 用来指定级联的键值配置对象 -->
              <el-cascader
                clearable
                v-model="selectOptions"
                :options="parentList"
                change-on-select
                @change="parentCateChanged"
                :props="{
                  expandTrigger: 'hover',
                  value: 'cat_id',
                  label: 'cat_name',
                  children: 'children',
                }"
                ref="cascaderRef"
              ></el-cascader>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="closedAddCateDialog">取 消</el-button>
            <el-button type="primary" @click="addCate">确 定</el-button>
          </span>
        </el-dialog>
      </el-row>
      <!-- 商品分类 -->
      <el-row class="treeTable">
        <tree-table
          border
          :show-row-hover="false"
          show-index
          :expand-type="false"
          :selection-type="false"
          :data="categoriesList"
          :columns="colums"
        >
          <!-- 在表格中使用我们的插槽isOk 并使用作用域插槽引入数据 -->
          <template slot="isOk" slot-scope="scope">
            <span class="s-icon-check" v-if="scope.row.cat_deleted === false">
              <i class="el-icon-check"></i>
            </span>

            <span class="s-icon-close" v-else>
              <i class="el-icon-close"></i>
            </span>
          </template>

          <!-- 排序模板 -->
          <template slot="order" slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag
              size="mini"
              type="success"
              v-else-if="scope.row.cat_level === 1"
              >二级</el-tag
            >
            <el-tag size="mini" type="warning" v-else>三级</el-tag>
          </template>
          <!-- 操作模板 -->
          <template slot="opt" slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="showEditCateDialog(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="removeCateById(scope.row)"
              >删除</el-button
            >
          </template>
        </tree-table>
      </el-row>

      <!-- 编辑对话框 -->
      <el-dialog
        title="编辑分类"
        :visible.sync="setEditDialogVisible"
        width="50%"
        @close="closedEditCateDialog"
      >
        <el-form
          :model="editCateForm"
          :rules="editRuleForm"
          ref="editFormRef"
          label-width="100px"
          class="demo-ruleForm"
          @close="closedEditCateDialog"
        >
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="editCateForm.cat_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closedEditCateDialog">取 消</el-button>
          <el-button type="primary" @click="editCateById">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 分页 -->
      <el-row>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[3, 5, 10, 15]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  created() {
    this.getCategoriesList()
  },
  data() {
    return {
      //指定我们的查询条件
      queryInfo: {
        //1表示1级分类列表 2是前两级分类列表 3是前三级分类列表
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      //商品分类数据
      categoriesList: [],
      //总共给我们返回多少条数据
      total: 0,
      //为table指定列的定义
      colums: [
        {
          label: '分类名称',
          prop: 'cat_name',
        },
        {
          label: '是否有效',
          //表示将当前列定义为模板列
          type: 'template',
          //表示当前这一列使用模板的名称
          template: 'isOk',
        },
        {
          label: '排序',
          type: 'template',
          template: 'order',
        },
        {
          label: '操作',
          type: 'template',
          template: 'opt',
        },
      ],
      //控制添加分类对话框的显示与隐藏
      setAddDialogVisible: false,
      addCateForm: {
        //分类父id 默认为0
        cat_pid: 0,
        cat_name: '',
        //分类层级 默认为0
        //0表示一级分类 1 二级分类 2三级分类
        cat_level: 0,
      },
      //表单的验证规则
      addRuleForm: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' },
        ],
      },
      //保存前两级分类列表
      parentList: [],
      //保存级联当前选中分类的id值
      selectOptions: [],
      //设置编辑对话框的显示与隐藏
      setEditDialogVisible: false,
      editCateForm: {
        cat_id: '',
        cat_name: '',
      },
      editRuleForm: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    async getCategoriesList() {
      const { data: res } = await this.$http.get('categories', {
        params: this.queryInfo,
      })

      if (res.meta.status !== 200) {
        return this.$message.error('获取商品列表失败')
      }

      this.categoriesList = res.data.result
      this.total = res.data.total

      //console.log(res.data.result)
      //console.log(this.total)
    },

    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getCategoriesList()
    },
    handleCurrentChange(newNum) {
      this.queryInfo.pagenum = newNum
      this.getCategoriesList()
    },

    showAddCateDialog() {
      //在对话框弹出之前就要开始获取分类数据了
      this.getParentlist()

      this.setAddDialogVisible = true
    },
    closedAddCateDialog() {
      this.setAddDialogVisible = false
      //重置表单的验证
      this.$refs.addFormRef.resetFields()
      //重置级联的选择
      //this.$refs.cascaderRef.clearCheckedNodes()

      //重置级联的选择 并初始化cat_pid、cat_level的值
      this.selectOptions = []
      this.addCateForm.cat_pid = 0
      this.addCateForm.cat_level = 0
    },
    //获取前两级分类列表
    async getParentlist() {
      const { data: res } = await this.$http.get('categories', {
        params: { type: 2 },
      })

      if (res.meta.status !== 200) {
        return this.$message.error('获取父级分类列表失败')
      }

      this.parentList = res.data
      //console.log(this.parentList)
    },
    //添加分类
    addCate() {
      console.log(this.addCateForm)
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return this.$message.info('请检查数据格式填写是否正确')

        const { data: res } = await this.$http.post(
          'categories',
          this.addCateForm
        )

        if (res.meta.status !== 201) {
          return this.$message.error('添加分类失败')
        }

        this.$message.success('添加分类成功')
        this.getCategoriesList()

        this.setAddDialogVisible = false
      })
    },
    //选项值发生变化触发
    parentCateChanged() {
      console.log(this.selectOptions)
      //如果 selectOptions.length>0 说明选中了父级分类
      //反之 则没有 只有一个分类名称
      if (this.selectOptions.length > 0) {
        //父级分类id 为该数组的最后一项 如果没有 则默认为0 是一级分类
        this.addCateForm.cat_pid = this.selectOptions[
          this.selectOptions.length - 1
        ]
        //当前分类的等级与selectOptions数组长度一致
        //当它的length为0时 代表是1级分类 以此类推 最高三级分类
        this.addCateForm.cat_level = this.selectOptions.length
        return
      } else {
        //否则 说明没有选中任何一个分类
        //那么父级分类id为0 代表没有任何父级分类
        this.addCateForm.cat_pid = 0
        //分类等级为0 是一级分类
        this.addCateForm.cat_level = 0
      }
    },
    //弹出编辑对话框
    showEditCateDialog(row) {
      //在弹出对话框时就要把row中的数据传递出去
      this.editCateForm.cat_name = row.cat_name
      this.editCateForm.cat_id = row.cat_id
      this.setEditDialogVisible = true
    },

    //修改分类名称
    editCateById() {
      //console.log(row)
      //修改数据之前先预验证下数据是否填写正确再发起请求
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return this.$message.info('请检查数据是否填写无误')

        const { data: res } = await this.$http.put(
          `categories/${this.editCateForm.cat_id}`,
          {
            cat_name: this.editCateForm.cat_name,
          }
        )

        if (res.meta.status !== 200) return this.$message.error('更新失败')

        this.$message.success('更新成功')

        this.getCategoriesList()

        this.setEditDialogVisible = false
      })
    },
    //关闭编辑对话框时触发
    closedEditCateDialog() {
      this.setEditDialogVisible = false
      this.$refs.editFormRef.resetFields()
    },
    //删除对应分类名称
    async removeCateById(row) {
      const confirmResult = await this.$confirm(
        `此操作将永久删除该用户, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((err) => err)
      //如果用户确认删除 返回值为confirm 反之 cancel

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }

      const { data: res } = await this.$http.delete(`categories/${row.cat_id}`)

      if (res.meta.status !== 200) {
        return this.$message.error('删除失败')
      }

      this.$message.success('删除成功')

      this.getCategoriesList()
    },
  },
}
</script>

<style lang="less" scoped>
.treeTable {
  margin-top: 20px;
}

.s-icon-check {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  background-color: green;
}

.s-icon-close {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  background-color: red;
}
</style>